<template>
<div class="footer-bar">
  <div class="footer-bg">
    <div class="w1200 footer-links">
      <h5>友情链接</h5>
      <p class="link">
        <a :href="v.contentLink" v-for="(v,i) in list" :key="i">{{v.contentName}}</a>
      </p>
    </div>
    <div class="w1200 footer-about clearfix">
      <ul>
        <h5>关于</h5>
        <li><a href="javascript:;">关于我们</a></li>
        <li><a href="javascript:;">加入我们</a></li>
        <li><a href="javascript:;">团队</a></li>
      </ul>
      <ul>
        <h5>服务</h5>
        <li><a href="javascript:;">服务条款</a></li>
        <li><a href="javascript:;">隐私协议</a></li>
      </ul>
      <ul>
        <h5>产品</h5>
        <li><a href="javascript:;">如何使用</a></li>
        <li><a href="javascript:;">视频介绍</a></li>
        <li><a href="javascript:;">更新历史</a></li>
        <li><a href="javascript:;">FAQ</a></li>
      </ul>
      <div class="we">
        <div class="we-left">
          <h5>关注我们</h5>
          <p class="icons">
            <a href="javascript:;"><img src="../assets/ym-footer/icon-wb.png" /></a>
            <a href="javascript:;"><img src="../assets/ym-footer/icon-wx.png" /></a>
            <a href="javascript:;"><img src="../assets/ym-footer/icon-qq.png" /></a>
          </p>
        </div>
        <div class="we-right">
          <h5>咨询电话</h5>
          <p class="we-tel">400 650 7893</p>
        </div>
        <p class="text">鹰目户外广告网是中国最大的户外广告投放平台，户外媒体行业服务平台。鹰目网秉承以 “为客户提供有价值的服务” 为宗旨，围绕 “做专” “做专业” “做精细” 的服务方针，坚持 “只做服务商” 的经营理念，致力于以顾问形式，服务于户外广告买卖双方。</p>
      </div>
    </div>
  </div>
  <div class="footer-copyright">
    <div class="w1200">
      <div class="copyright">
        <p>
          <span>Copyright © 2012-2017</span>
          <span>北京鹰目网络科技有限公司</span>
          <span>京ICP备14044439号-1</span>
          <img src="../assets/ym-footer/icon-g.png" />
          <span>京公网安备 11010802020633号</span>
        </p>
        <p>
          <span>地址：北京市海淀区上地东路35号颐泉汇大厦D座5层</span>
          <span>热线：400 650 7893</span>
          <span>电话/传真：010-82824490</span>
        </p>
      </div>
      <div class="safety clearfix">
        <a href="javascript:;"><img src="../assets/ym-footer/safe-360.png" /></a>
        <a href="javascript:;"><img src="../assets/ym-footer/safe-kexin.png" /></a>
        <a href="javascript:;"><img src="../assets/ym-footer/safe-aqlm.png" /></a>
      </div>
    </div>
  </div>
</div>
</template>

<script>
  export default {
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
        list: []
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      getList: function() {
        this.$http({
          url: this.requestAddr+'/GetJson/get/friendLink',
          method: 'JSONP',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          jsonp: 'callbackparam'
        }).then(res => {
          /*console.log(res.data);*/
          if (res.data != null) {
            this.list = res.data;
          }
        }).catch()
      }
    }
  }

</script>

<style scoped lang="less">
  .footer-bg {
    height: 475px;
    background-color: #f3f9ff;
    /*    background: linear-gradient(to bottom, #c6dbed 0%,#f3f9ff 100%);*/
    background-image: url(../assets/ym-footer/footer-bg.png);
    background-repeat: no-repeat;
    background-size: 1920px 495px;
    background-position: top center;
    .w1200 {
      width: 1200px;
      margin: 0 auto;
      padding-left: 16px;
      padding-right: 16px;
      .link{
        a{
          padding-right: 10px;
          background-image: url(../assets/ym-footer/interval.png);
          background-repeat: no-repeat;
          background-position: center right;
          &:last-child{
            background-image: none;
          }
        }
      }
    }

    .footer-links {
      padding-top: 80px;
      h5 {
        color: #eca73c;
        font-size: 20px;
        line-height: 36px;
      }
      p {
        font-size: 14px;
        line-height: 30px;
        a {
          margin-right: 8px;
          color: #fff;
        }
      }
    }

    .footer-about {
      margin-top: 40px;
      h5 {
        &:extend(.footer-links h5);
          color: #eca73c;
          font-size: 16px;
      }
      ul {
        width: 180px;
        float: left;
        h5 {
          padding-bottom: 18px;
          font-size: 16px;
          color: #eca73c;
        }
        li {
          &:extend(.footer-links p);
          line-height: 36px;
          font-size: 14px;
          a {
            &:extend(.footer-links p a);
            color: white;
          }
        }
      }
      .we {
        float: right;
        width: 520px;
        .we-left{
          float: left;
          width: 260px;
          .icons {
            padding-top: 18px;
            padding-bottom: 15px;
            a {
              margin-right: 22px;
            }
          }
        }
        .we-right{
          width: 260px;
          float: right;
          .we-tel{
            margin-top: 18px;
            font-size: 30px;
            font-weight: bold;
            color: #f09700;
          }
        }
        .text {
          clear: both;
          color: white;
          line-height: 28px;
          margin-right: 0;
          font-size: 14px;
        }
      }
    }
  }

  .footer-copyright {
    height: 108px;
    background: #1a1a1a;
    .w1200 {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .copyright {
      color: #fff;
      font-size: 12px;
      line-height: 30px;
      p {
        display: flex;
        align-items: center;
      }
      span {
        margin-right: 10px;
      }
      img {
        margin-right: 3px;
      }
    }
    .safety a {
      float: left;
      margin-left: 12px;
      img {
        display: block;
      }
    }
  }

</style>
